<div ng-form name="syncPlanForm" novalidate role="form">
  <div bst-form-group label="{{ 'Name' | translate }}">
    <input id="name"
           name="name"
           ng-model="syncPlan.name"
           type="text"
           tabindex="1"
           autofocus
           required/>
  </div>

  <div bst-form-group label="{{ 'Description' | translate }}">
   <textarea id="description"
             name="description"
             ng-model="syncPlan.description"
             tabindex="2">
   </textarea>
  </div>

  <div bst-form-group label="{{ 'Interval' | translate }}">
    <select id="interval"
            name="interval"
            ng-model="syncPlan.interval"
            ng-options="interval.id as interval.value for interval in intervals"
            tabindex="3"
            required>
      <option value="" translate>-- select an interval --</option>
    </select>
  </div>

  <div bst-form-group label="{{ 'Custom Cron' | translate }}" ng-show="syncPlan.interval === 'custom cron'">
   <input id="cron_expression"
             name="cron_expression"
             ng-model="syncPlan.cron_expression"
             type="text"
             tabindex="4"/>
  </div>

  <div bst-form-group label="{{ 'Start Date' | translate }}">
    <div class="input-group">
      <input type="text" uib-datepicker-popup
             id="startDate"
             name="startDate"
             is-open="isOpen"
             ng-model="syncPlan.startDate"
             show-weeks="false"
             tabindex="5"
             required/>

     <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-click="isOpen = !isOpen">
         <i class="fa fa-calendar"></i>
       </button>
     </span>
    </div>
  </div>

  <div bst-form-group label="{{ 'Start Time' | translate }}">
    <div uib-timepicker show-meridian="false"
         id="startTime"
         name="startTime"
         ng-model="syncPlan.startTime"
         tabindex="5">
    </div>
    <p class="help-block" translate>The time the sync should happen in your current time zone.</p>
  </div>

  <div ng-init="setForm(syncPlanForm);"></div>

  <div ng-show="isState('sync-plans.new')">
    <div bst-save-control
         on-cancel="transitionBack()"
         on-save="createSyncPlan(syncPlan)"
         working="isWorking">
    </div>
  </div>
</div>
